import React from 'react';
import { Row, Col, Card, Message, Badge, message } from 'antd';
import { connect } from 'dva';
import './index.css'
// import DaySum from './daySum'
import PieReact from '../../components/Echarts/PieReact';
import BarReact from '../../components/Echarts/BarReact';
import LineReact from '../../components/Echarts/LineReact';
import Modal from './modal';
import { getAllChange, changeService } from '../../services/api';

class Index extends React.Component {
	state = {
		area: 'day',
		order: 'month',
		pieOption: {
			tooltip: {
				trigger: 'item',
			},
			color: ['#658CF1', '#E5E5E5'],
			legend: {
				orient: 'horizontal',
				itemGap: 20,
				bottom: 0,
				itemGap: 150,
				data: [{
					name: '已完成',
					icon: 'circle'
				}, {
					name: '未完成',
					icon: 'circle'
				}]
			},
			grid: {
				top: 10
			},
			series: [
				{
					name: '单数',
					type: 'pie',
					radius: ['80%', '75%'],
					center: ['50%', '50%'],
					avoidLabelOverlap: false,
					hoverAnimation: false,
					label: {
						fontSize: 20,
						normal: {
							show: false,
							position: 'center',

						},
					},
					labelLine: {
						normal: {
							show: false
						}
					},
					data: [
						{ value: 0, name: '已完成' },
						{ value: 0, name: '未完成' }
					]
				}
			]
		},
		areaOption: {
			tooltip: {
				trigger: 'item',
			},
			color: ['#658CF1', '#E5E5E5'],
			legend: {
				show: false,
			},
			grid: {
				top: 10
			},
			series: [
				{
					name: '单数',
					type: 'pie',
					radius: ['80%', '75%'],
					center: ['50%', '50%'],
					avoidLabelOverlap: false,
					hoverAnimation: false,
					label: {
						fontSize: 20,
						normal: {
							show: false,
							position: 'center',

						},
					},
					labelLine: {
						normal: {
							show: false
						}
					},
					data: [
						{ value: 0, name: '高新区' }
					]
				}
			]
		},
		barOption: {
			color: ['#3398DB'],
			tooltip: {
				trigger: 'axis',
				axisPointer: {            // 坐标轴指示器，坐标轴触发有效
					type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
				}
			},
			grid: {
				left: '3%',
				right: '4%',
				bottom: '3%',
				containLabel: true
			},
			xAxis: [
				{
					type: 'category',
					data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
					axisTick: {
						alignWithLabel: true
					}
				}
			],
			yAxis: [
				{
					type: 'value'
				}
			],
			series: [
				{
					name: '直接访问',
					type: 'bar',
					barWidth: '60%',
					data: [10, 52, 200, 334, 390, 330, 220]
				}
			]
		},
		lineOption: {
			xAxis: {
				type: 'category',
				boundaryGap: false,
				data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
			},
			tooltip : {
				trigger: 'axis',
				axisPointer: {
					type: 'cross',
					label: {
							backgroundColor: '#6a7985'
					}
				}
			},
			yAxis: {
				type: 'value'
			},
			series: [{
				data: [820, 932, 901, 934, 1290, 1330, 1320, 1320, 12, 1320, 432, 1320],
				type: 'line',
				name: '接单总数',
				areaStyle: {
					color: '#C3DEFF'
				},
				lineStyle: {
					color: '#3D94FF'
				},
				itemStyle: {
					color: '#3791FF'
				}
			}]
		},
		tipArr: [],
		selectInfo: {},
	}
	componentDidMount() {
		this.props.dispatch({type: 'example/setServicePersons'});
		this.getAllChange();
	}
	/** 
	 * 获取服务变更列表
	*/
	getAllChange = async () => {
		let res = await getAllChange();
		if(res.code === 200) {
			this.setState({
				tipArr: res.data,
				
			})
		} 
		else {
			res.msg && message.error(res.msg)
		}
	}
	/** 
	 * 展示服务更改详情
	*/
	showDetail = async (info) => {
		this.setState({
			selectInfo: info,
			showModal: true
		});
	}
	/** 
	 * 服务变更
	*/
	changes = async (params) => {
		let res = await changeService(params);
		console.log('参数',params)
		if(res.code === 200) {
			Message.success(res.msg);
			let arr = this.state.tipArr.filter(item=> item.fId !== params.fId);
			this.setState({
				showModal: false,
				tipArr: arr,
			});
			this.getAllChange();
			return;
		}
		Message.error(res.msg)
	}

	render() {
		return (
			<div className='container'>
				<Row>
					<Col span={6} push={2}>
						<Card className='divStyle'>
							<Row>
								<b style={{ fontSize: 16 }}>当日统计</b>
							</Row>
							<Row style={{ marginTop: -20 }}>
								<PieReact width='100%' height="250px" option={this.state.pieOption} />
							</Row>
						</Card>
					</Col>
					<Col span={12} push={4}>
						<div className='divStyle'>
							<BarReact height="300px" option={this.state.barOption} />
						</div>
					</Col>
				</Row>
				<Row style={{ marginTop: '6vh' }}>
					<Col span={6} push={2}>
						<Card className='divStyle' style={{ position: 'relative' }}>
							<Row>
								<b style={{ fontSize: 16 }}>区域统计</b>
							</Row>
							<Row>
								<PieReact width='100%' height="250px" option={this.state.areaOption} />
							</Row>
							<Row style={{ width: 100, position: 'absolute', top: 40, right: 10 }}>
								<Col span={8} style={{ borderRight: '1px solid #E5E5E5', textAlign: 'center' }}>
									<span style={{ color: `${this.state.area === 'day' ? '#99B0F5' : '#D4D4D5'}`, cursor: 'pointer' }} onClick={() => this.setState({ area: 'day' })}>日</span>
								</Col>
								<Col span={8} style={{ borderRight: '1px solid #E5E5E5', textAlign: 'center' }}>
									<span style={{ color: `${this.state.area === 'month' ? '#99B0F5' : '#D4D4D5'}`, cursor: 'pointer' }} onClick={() => this.setState({ area: 'month' })}>月</span>
								</Col>
								<Col span={8} style={{ textAlign: 'center' }}>
									<span style={{ color: `${this.state.area === 'year' ? '#99B0F5' : '#D4D4D5'}`, cursor: 'pointer' }} onClick={() => this.setState({ area: 'year' })}>年</span>
								</Col>
							</Row>
						</Card>
					</Col>
					<Col span={6} push={4}>
						<Card className='divStyle' style={{ position: 'relative' }}>
							<Row>
								<b style={{ fontSize: 16 }}>接单统计</b>
							</Row>
							<Row>
								<LineReact width='100%' height="250px" option={this.state.lineOption} />
							</Row>
							<Row style={{ width: 70, position: 'absolute', top: 40, right: 10 }}>
								<Col span={12} style={{ borderRight: '1px solid #E5E5E5', textAlign: 'center' }}>
									<span style={{ color: `${this.state.order === 'month' ? '#99B0F5' : '#D4D4D5'}`, cursor: 'pointer' }} onClick={() => this.setState({ order: 'month' })}>月</span>
								</Col>
								<Col span={12} style={{ textAlign: 'center' }}>
									<span style={{ color: `${this.state.order === 'year' ? '#99B0F5' : '#D4D4D5'}`, cursor: 'pointer' }} onClick={() => this.setState({ order: 'year' })}>年</span>
								</Col>
							</Row>
						</Card>
					</Col>
					<Col span={5} push={5}>
						<Card className='divStyle' style={{ position: 'relative',overflowY: 'auto' }}>
							<Row>
								<b style={{ fontSize: 16 }}>更改单提醒</b>
							</Row>
							{
								this.state.tipArr.length === 0 ?
								<p style={{marginTop:20}}>暂无数据</p>:
								this.state.tipArr.map((data) => {
									// data.fElderlyName === 'undefined' ? null : data.fElderlyName;
									// data.fOldServiceType === 'undefined' ? null : data.fOldServiceType;
									// data.fNewServiceType === 'undefined' ? null : data.fNewServiceType;
									let content = `${data.fElderlyName}：${data.fOldServiceType} -> ${data.fNewServiceType}`;
									return (
										<Row key={data.fId} style={{marginBottom: 4,marginTop: 3}}>
											<div className="tip" style={{cursor: 'pointer'}} onClick={()=>this.showDetail(data)}>
												<Badge status="processing" text={content}/>
											</div>
										</Row>
									)
								})
							}
						</Card>
					</Col>
				</Row>
				<Modal visable={this.state.showModal} servicePersons={this.props.servicePersons} info={this.state.selectInfo} operateModal={()=>this.setState({showModal: !this.state.showModal})} changes={this.changes}/>
			</div>
		)
	}
}

export default connect((state) => ({
	servicePersons: state.example.servicePersons
}))(Index);